<?xml version="1.0" encoding="UTF-8"?>
<!--
  Created by IntelliJ IDEA.
  User: Nikita
  Date: 03.02.13
  Time: 22:59
-->
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/facelets" xmlns:c="http://java.sun.com/jsf/core">

<h:head>
    <title>Ajax page</title>
    <h:outputStylesheet library="css" name="examples.css"/>
    <c:loadBundle var="msgs" basename="myevents.messages"/>
    <h:outputScript library="script" name="jquery-1.9.1.min.js"/>

</h:head>

<h:body>
    <f:decorate template="templates/master_page_default.xhtml">
        <h2>Ajax</h2>
        <c:ajax render="table" event="action" execute="@form" onevent="ajaxAction">
            <h:form id="ajaxform" prependId="false">
                <h:panelGrid columns="2">
                    <h:outputLabel for="newValueId" value="New value"/>
                    <h:inputText name="newValue" id="newValueId" size="20" value="#{ajax_request.newValue}"/>
                </h:panelGrid>
                <h:commandButton value="Add" action="#{ajax_request.saveNewValue}">
                    <!--<c:ajax execute="@form" event="action" render="table"/>-->
                </h:commandButton>
                <h:outputText value="Your values:"/>
                <img src="resources/images/icon_waiting.gif" id="waitingImage" alt="Waiting"/>
                <h:panelGroup layout="block" id="table">
                    <f:repeat value="#{ajax_session.listValues}" var="val" varStatus="ind">
                        <div>
                            <h:outputFormat value="{0} : {1}">
                                <c:param value="#{ind.index}"/>
                                <c:param value="#{val}"/>
                            </h:outputFormat>
                        </div>
                    </f:repeat>
                </h:panelGroup>
            </h:form>
        </c:ajax>


    </f:decorate>
    <h:outputScript>
        var waitingImage = $('#waitingImage').hide();

        function ajaxAction(data) {
            if (data.status == "begin") {
                onStart();
            } else {
                if (data.status == "success") {
                    onComplete();
                }
                $('input:submit').removeAttr('disabled');
            }
        }

        function onComplete() {
            waitingImage.hide();
        }

        function onStart() {
            $('input:submit').attr('disabled', 'disabled')
            waitingImage.show();
        }
    </h:outputScript>
</h:body>

</html>